<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8"/>
	<title>注册用户</title>
	<link rel="stylesheet" th:href="@{/layui/css/layui.css}" href="../static/layui/css/layui.css"/>
	<link rel="stylesheet" th:href="@{/styles/login.css}" href="../static/styles/login.css"/>
	<style type="text/css" th:inline="text">
		
	</style>
</head>
<body>
	<div class="login" style="margin-top:50px;">
	    <div class="header">
	        <div class="switch" id="switch">
	        		<a class="switch_btn_focus" id="switch_qlogin" tabindex="7">注册用户</a>
	        </div>
	    </div>
	    <div class="web_qr_login" id="web_qr_login" style="display: block;">    
	        <div class="web_login" id="web_login">
	            <div class="login-box">
	                <div class="login_form">
	                   <form class="layui-form" action="/register" method="post" th:object="${user}">
						    <div class="layui-form-item">
						        <label class="layui-form-label">用户名</label>
						        <div class="layui-input-inline">
						            <input type="text" th:field="*{username}" name="username" lay-verify="username|required" placeholder="请输入用户名" autocomplete="off" class="layui-input"/>
						            <span th:if="${#fields.hasErrors('username')}">
							            <span th:text="${#fields.errors('username')}"></span>
							        </span>
						        </div>
						    </div>
						    
						    <div class="layui-form-item">
					            <label class="layui-form-label">邮箱</label>
					            <div class="layui-input-inline">
					                <input type="text" name="email" th:field="*{email}" lay-verify="email|required" autocomplete="off" class="layui-input"/>
					                <span th:if="${#fields.hasErrors('email')}">
							            <span th:text="${#fields.errors('email')}"></span>
							        </span>
					            </div>
						    </div>
						
						    <div class="layui-form-item">
						        <label class="layui-form-label">密码</label>
						        <div class="layui-input-inline">
						            <input type="password" id="pwd" name="password" th:value="*{password}" lay-verify="password|required" placeholder="请输入密码" autocomplete="off" class="layui-input"/>
						        </div>
						        <div class="layui-form-mid layui-word-aux">请填写6到18位密码</div>
						    </div>
						    
						    <div class="layui-form-item">
						        <label class="layui-form-label">确认密码</label>
						        <div class="layui-input-inline">
						            <input type="password" name="confirmPassword" th:value="*{password}" lay-verify="confirmPassword|required" placeholder="请再输入一次密码" autocomplete="off" class="layui-input"/>
						        </div>
						        <div class="layui-form-mid layui-word-aux">请再输入一次密码</div>
						    </div>
						    
						    <div class="layui-form-item">
							  	<div class="layui-inline">
							    		<label class="layui-form-label">验证码</label>
							    		<div class="layui-input-inline" style="width: 100px;">
							       		<input type="text" name="verifyCode" placeholder="验证码" lay-verify="required" autocomplete="off" class="layui-input"/>
							    		</div>
							    		<div class="layui-form-mid"></div>
							    		<div class="layui-input-inline" style="width: 100px;">
						       			<img onclick="updateVerifyCode();" style="width:100px;height:38px;" src= "" th:src="@{/verifyCode}" alt="验证码"/>
							    		</div>
							    		<span th:if="${verifyCodeError!=null}">
							            <span th:text="${verifyCodeError}"></span>
							        </span>
					  			</div>
							</div>
						
						    <div class="layui-form-item">
						        <div class="layui-input-block">
						            <button class="layui-btn" lay-submit="" lay-filter="register">立即提交</button>
						            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
						        </div>
						    </div>
						</form>
	                </div>
	            </div>
	        </div>
	  	</div>
	</div>
	<div class="jianyi">*推荐使用ie8或以上版本ie浏览器或Chrome内核浏览器访问本站</div>

	<script th:src="@{/layui/layui.js}" src="../static/layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script type="text/javascript" >
		function updateVerifyCode() {
			console.log(event.target.src);
			event.target.src = "/verifyCode?t=" + Date.now();
		}
		
    		layui.use(['form'], function(){
	        var form = layui.form, layer = layui.layer, $ = layui.jquery;
	
	        //自定义验证规则
	        form.verify({
	            username: function(value) {
	                if(value.length < 5) {
	                    return '用户名至少得5个字符啊';
	                }
	            }
	            ,password: [/(.+){6,18}$/, '密码必须6到18位']
	            ,confirmPassword: function(value, item) {
	            		// 这里校验两次密码输入使用了jQuery
	            		if(value != $('#pwd').val()) {
	            			return '两次密码输入不一致';
	            		}
	            }
	        });
	
	        //监听提交
	        form.on('submit(register)', function(data){
	        		console.log('注册数据信息：', JSON.stringify(data));
	        });
	    });
	</script>
</body>
</html>